<template>
  <view class="cityto">
    <view class="address">{{ $ftext(from) }}</view>
    <view class="midview">
      <image class="dotline" src="https://zxtest001.oss-cn-beijing.aliyuncs.com/l-owner-uni3/icon_dotline.png"></image>
      <slot class="slotview">
        <image class="zhuangche-img" src="https://zxtest001.oss-cn-beijing.aliyuncs.com/l-owner-uni3/icon_zhuangche.png"></image>
      </slot>
    </view>
    <view class="address">{{ $ftext(to) }}</view>
  </view>
</template>

<script setup lang="ts">
const props = defineProps({
  from: {
    type: String,
  },
  to: {
    type: String,
  },
});
</script>

<style lang="scss" scope>
.cityto {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  .address {
    min-width: 100rpx;
    width: fit-content;
    font-size: 32rpx;
    color: #000050;
    line-height: 44rpx;
    font-weight: bold;
  }
  .midview {
    position: relative;
    height: 44rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .dotline {
    width: 310rpx;
    height: 4rpx;
  
    display: flex;
    align-items: center;
  }
  .slotview {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }
  .zhuangche-img {
    position: absolute;
    width: 40rpx;
    height: 30rpx;
  }
}
</style>
